<template>
    <view class="coupon_wrapper">
		<view class="coupon_item" v-for="item in couponList" :key="item.id">
			<view class="coupon_message">
				<text class="msg">{{item.menkan_price > 0 ? '满' + item.menkan_price + '减' + item.jian_price : '减' + item.jian_price}}</text>
				<text class="level">{{item.menkan_price > 0 ? ' 满减卷' : '无门槛卷'}}</text>
			</view>
			<u-button text="点击领券" @click="getCoupon(item)"></u-button>
		</view>
    </view>
</template>

<script>
export default {
    props: ['youhuinav', 'prevent'],
    data() {
        return {
			couponList: []
        };
    },
	created() {		
		this.init();
	},
    methods: {
		init(){	//	页面初始化
			this.couponList = this.$props.youhuinav;
			console.log('优惠券列表：',this.couponList);
		},
		getCoupon(v){ // 领券
			console.log('领券',v);
			if (!v.id) return uni.showToast({ title: '配置参数不完整',icon: 'error' })
			uni.navigateTo({ url: `/pages/coupon/index?id=${v.id}&subIndex=0` })
		},		
    }    
};
</script>

<style lang="scss" scoped>
.coupon_wrapper{
	padding: 10px;
	margin: 10px 0;
	box-sizing: border-box;
	background-color: #FFEEE1 !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.coupon_item{
		width: 49.8%;
		padding: 5px;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.coupon_message{
			margin: 0 5px 0 0;
			color: #ff882d;
			text-align: center;
			.msg{
				display: block;
				font-size: 12px;
			}
			.level{
				display: block;
				font-size: 13px;
				line-height: 18px;
			}
		}
		::v-deep button{
			width: 70px;
			text-align: center;
			height: 24px;
			line-height: 24px;
			border-radius: 12px;
			background-color: #FF882D;
			color: #FFF;
		}
	}
}
</style>